<template>
	<view class="publish">
		<view class="ph-tabs">
			<liuyuno-tabs :tabData="tabs" :defaultIndex="tabAvtive" :border="true"
					:config="{display: 'none', color: '#666666', activeColor: '#162641'}" @tabClick='changeTab'></liuyuno-tabs>
		</view>
		<view class="content">
			<text-editor :id-name="`editor${tabAvtive}`" :ref="`editor${tabAvtive}`" :userId="userId" :info="editorInfoOri" @chooseFile="chooseFile"></text-editor>
		</view>
		<view class="all-img-file">
			<view class="imgs" v-if="showFiles.sendimgs">
				<view class="img-box" v-for="(item, i) in showFiles.sendimgs" :key="i">
					<image class="img" :src="api.xiaodeObsUrl+item.path" mode="aspectFill"></image>
					<image class="close" @click="delImages(i)" src="/static/chat/close.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="video" v-if="showFiles.sendfiles">
				<view class="video-box" :data-url="showFiles.files[0].path" v-if="showFiles.sendfiles.length>0">
					<zy-video 
						:ref="'videoRef'"
						:refi="'videoRef'"
						:width="utils.getpx(686)"
						:height="utils.getpx(386)"
						@playVideo="playVideo"
						:src="showFiles.files[0].path"></zy-video>
					<image class="close" @click="delFiles(0)" src="/static/chat/close.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="publish-now" :style="{opacity: utils.editorCont(editorInfoOri.content)?1:.3}">
				<text @click="confirmPublish()">发布</text>
			</view>
		</view>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.bg" :show="jur_popup" @click="jur_popup=false">
		</uni-transition>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.fade"
			:show="jur_popup">
			<view class="jur-popup popup-top">
				<view class="jp-item" v-for="i in 3" :key="i">
					<uni-icons size="50rpx" type="reload"></uni-icons>
					<view class="">
						<text>公开</text>
						<view>所有人可见</view>
					</view>
				</view>
			</view>
		</uni-transition>
	</view>
</template>
<script>
import textEditor from './components/text-editor.vue'
export default {
	components: {
		textEditor
	},
	data() {
		return {
			userId: 0,
			tabs: ['新鲜事'],
			tabAvtive: 0,
			editorInfo: {
				content: '',
				showUpload: false,
				placeText: '成长历程的一切感受，都值得记录~',
				bottom: '142rpx',
				formats: 'video'
			},
			jur_popup: false,
			filesOri: {
				sendimgs: [],
				sendfiles: []
			},
			editorInfoOri: {
				content: '',
				showUpload: false,
				placeText: '成长历程的一切感受，都值得记录~',
				bottom: '142rpx',
				formats: 'video'
			},
			showFiles: {},
		}
	},
	onLoad(){
		this.userId = uni.getStorageSync('tokenObj').userId
		this.editorInfo.userType = uni.getStorageSync('tokenObj').isStudent?'2':'1';
	},
	methods: {
		changeTab(i){
			this.tabAvtive = i;
			this.showFiles = this.filesOri
			this.$nextTick(()=>{
				this.$refs[`editor${i}`].closePopup()
			})
		},

		confirmPublish(){
			let info = this.filesOri

			let images = info.sendimgs || [],
				fs = info.sendfiles || [];
			let list = images.concat(fs)
			// return
			this.creatCampusOriginal(list)
		},
		// 创建新鲜事
		creatCampusOriginal(list){
			if(!this.editorInfoOri.content){
				this.utils.showToast('内容不能为空')
				return
			}
			this.api.post('share/creatCampusOriginal', {
				content: this.editorInfoOri.content,
				files: JSON.stringify(list),
				state: 1
			}).then(res=>{
				if(res.data.state !='ok') return;
				this.editorInfoOri.content = ''
				this.$refs.editor0.closeHtml()
				this.filesOri = {}
				uni.navigateTo({
					url: '/pages/recommend/publish-success?type=2'
				})
			})
		},
		chooseFile(type, list, sendList){
			let info = this.filesOri
			let files = info.files || [],
				sendimgs = info.sendimgs || [],
				sendfiles = info.sendfiles || []
			if(type==1){
				let fun = ()=>{
					files = []
					sendfiles = []
					sendimgs = sendimgs.concat(sendList)

					info.sendimgs = sendimgs
					info.files = files
					info.sendfiles = sendfiles
					this.showFiles = info
					if(sendimgs.length>9){
						this.utils.showToast('最多可以上传9张图片')
						sendimgs.splice(9)
					}
				}
				if(sendfiles.length>0){
					this.utils.showModal('', '图片和视频只能选择一种上传，确定要覆盖视频吗？', fun)
					return
				}
				fun()
			}else{
				let fun = ()=>{
					sendimgs = []
					files = list
					sendfiles = sendList

					info.sendimgs = sendimgs
					info.files = files
					info.sendfiles = sendfiles
					this.showFiles = info
				}
				if(sendimgs.length>0){
					this.utils.showModal('', '图片和视频只能选择一种上传，确定要覆盖图片吗？', fun)
					return
				}
				fun()
				
			}
			
		},
	// 播放视频
		playVideo(refi){
			// if(this.videoRefIndex){
				this.$refs.videoRef.pauseVideo();
			// }
			// this.videoRefIndex = refi;
		},
		// 删除文件
		delImages(i){
			this.filesOri.sendimgs.splice(i, 1)
		},
		delFiles(i){
			this.filesOri.sendfiles.splice(i, 1)
		},
	}
}

</script>
<style lang="less" scoped>
	.publish{
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		.ph-tabs{
			padding: 32rpx 16rpx;
			margin: 0 16rpx;
			display: flex;
			align-items: center;
			border-bottom: 4rpx solid #f2f2f2;
			text{
				margin-right: 40rpx;
				display: inline-block;
				width: 180rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 26rpx;
				border: 1rpx solid #999999;
				box-sizing: border-box;
				color: #666666;
				&.active{
					background-color: transparent;
					line-height: 60rpx;
					border: 2rpx solid #333;
					color: #333;
					font-weight: 600;
				}
			}
		}
		.title{
			margin: 20rpx 32rpx 0;
			padding: 40rpx 0;
			border-bottom: 4rpx dotted #E2E4EA;
			input{
				font-size: 32rpx;
				font-weight: 600;
			}
		}
		.content{
			margin: 32rpx 32rpx;
			textarea{
				width: 100%;
				height: 100rpx;
				font-size: 28rpx;
			}
		}
		
		.jur-popup{
			width: 690rpx;
			height: 400rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 32rpx 40rpx;
			box-sizing: border-box;
			.jp-item{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				margin-bottom: 32rpx;
				&.active{
					color: #55acee;
				}
				.uni-icons{
					margin-right: 16rpx;
				}
			}
		}
		.all-img-file{
			.video-box{
				margin: 0 32rpx;
				position: relative;
			}
			.close{
				position: absolute;
				top: 0;
				right: 0;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.imgs{
			font-size: 0;
			padding: 32rpx;
			.img{
				width: 215rpx;
				height: 215rpx;
				border-radius: 8rpx;
			}
			.img-box{
				display: inline-block;
				width: 215rpx;
				height: 215rpx;
				position: relative;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				&:nth-child(3n){
					margin-right: 0;
				}
			}
		}
		.bottom-btn{
			height: 142rpx;
			.publish-now{
				
				position: fixed;
				bottom: 0;
				/* #ifdef H5 */
				left: var(--window-left);
				right: var(--window-right);
				/* #endif */
				/* #ifndef H5 */
				left: 0;
				right: 0;
				/* #endif */
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 32rpx;
				background-color: #fff;
				box-shadow: 0 2rpx 6rpx 0 rgba(208, 208, 208, .5);
				text{
					display: inline-block;
					width: 100%;
					height: 94rpx;
					line-height: 94rpx;
					text-align: center;
					background-color: #28C2CD;
					font-size: 32rpx;
					color: #fff;
					border-radius: 20rpx;
				}
			}
		}
		.bottom-oper{
			position: fixed;
			bottom: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			/* #ifndef H5 */
			left: 0;
			right: 0;
			/* #endif */
			
			
			.oper-box{
				border-top: 2rpx solid #f2f2f2;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				padding-left: 32rpx;
				image{
					margin: 0 10rpx;
					width: 42rpx;
					height: 42rpx;
				}
			}
			.left{
				.uni-icons{
					margin-right: 32rpx;
				}
			}
			.sent-btn{
				width: 144rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #55acee;
				color: #fff;
				text-align: center;
			}
		}
		.upload-img{
			margin-top: 70rpx;
			width: 180rpx;
			text-align: center;
			margin-left: 32rpx;
			text{
				margin-top: 20rpx;
				display: block;
				font-size: 28rpx;
				color: #999999;
			}
		}
		.add-img{
			width: 180rpx;
			height: 180rpx;
		}
	}
</style>